<template>
  <!-- 添加或修改用户配置对话框 -->
  <el-dialog
    :title="title"
    :visible.sync="open"
    width="750px"
    append-to-body
    class="dialogClass"
    @close="cancel"
  >
    <template slot="title">
      <div class="modalTitle">
        <img
          src="../../../../assets/bluelogo/drawerTitle.png"
          alt=""
          class="titleLogo"
        />{{ title }}
      </div>
    </template>
    <el-transfer
      v-model="filterOptions"
      :data="data"
      class="transfer"
      :titles="['部门已有角色名称', '所选角色名称']"
    ></el-transfer>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel" class="resetButton">取 消</el-button>
      <el-button type="primary" @click="submitForm" class="searchButton"
        >确 定</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import {
  listUser,
  getUser,
  delUser,
  addUser,
  updateUser,
  resetUserPwd,
  changeUserStatus,
  deptTreeSelect,
  getRoleIdListByDeptId,
  updateAuthRole,
} from "@/api/system/user";
import Treeselect from "@riophae/vue-treeselect";
export default {
  name: "TransferModal",
  dicts: ["sys_normal_disable"],
  components: { Treeselect },
  props: ["modalType", "userId", "id", "modalDeptId"],
  data() {
    return {
      filterOptions: [],
      data: [],
      //表单参数
      form: {},
      // 弹出层标题
      title: "",
      // 部门树选项
      deptOptions: undefined,
      // 角色选项
      roleOptions: [],
      // 是否显示弹出层
      open: false,
      // 表单校验
      rules: {
        userName: [
          { required: true, message: "用户名称不能为空", trigger: "blur" },
          {
            min: 2,
            max: 20,
            message: "用户名称长度必须介于 2 和 20 之间",
            trigger: "blur",
          },
        ],
        roleIds: [
          { required: true, message: "用户角色不能为空", trigger: "blur" },
        ],
        nickName: [
          { required: true, message: "用户昵称不能为空", trigger: "blur" },
        ],
        password: [
          { required: true, message: "用户密码不能为空", trigger: "blur" },
          {
            min: 5,
            max: 20,
            message: "用户密码长度必须介于 5 和 20 之间",
            trigger: "blur",
          },
        ],
        // email: [
        //   {
        //     type: "email",
        //     message: "请输入正确的邮箱地址",
        //     trigger: ["blur", "change"],
        //   },
        // ],
        phonenumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: "请输入正确的手机号码",
            trigger: "blur",
          },
        ],
      },
    };
  },
  mounted() {},
  watch: {
    id: {
      handler(value) {
        if (value) {
          this.reset();
          getUser().then((response) => {
            this.open = true;
            this.title = "分配角色";
          });
        }
      },
      immediate: true,
    },
    modalDeptId: {
      handler(value) {
        if (value) {
          let params = {
            deptId: value,
          };

          this.data = [];
          getRoleIdListByDeptId(params).then((response) => {
            this.deptOptions = response.data;
            this.deptOptions.forEach((element) => {
              this.data.push({
                key: element.roleId,
                label: element.roleName,
              });
            });
          });
        }
      },
      immediate: true,
    },
  },
  created() {},
  methods: {
    /** 查询部门下拉树结构 */
    getDeptTree() {
      deptTreeSelect().then((response) => {
        this.deptOptions = response.data;
      });
    },
    // 表单重置
    reset() {
      this.form = {
        userId: undefined,
        deptId: undefined,
        userName: undefined,
        nickName: undefined,
        password: undefined,
        phonenumber: undefined,
        email: undefined,
        sex: undefined,
        status: "0",
        remark: undefined,
        postIds: [],
        roleIds: [],
      };
      this.resetForm("form");
    },
    // 取消按钮
    cancel() {
      this.$emit("update:modalType", undefined);
      this.open = false;
      this.reset();
    },
    /** 提交按钮 */
    submitForm: function () {
      const userId = this.id;
      const roleIds = this.filterOptions.join(",");
      if (!roleIds) {
        this.$modal.msgError("请选择用户角色");
      } else {
        updateAuthRole({ userId: userId, roleIds: roleIds }).then(
          (response) => {
            this.$modal.msgSuccess("授权成功");
            this.open = false;
          }
        );
      }
    },
  },
};
</script>
<style scoped lang="scss">
@import "../../../../assets/styles/dialog.scss"; //模态框样式
.formClass {
  padding: 10px 60px 0px 30px;
}
.transfer {
  margin-left: 50px;
}
</style>
